<!--
 * @Author: taosong
 * @Date: 2021-01-18 20:43:45
 * @LastEditors: taosong
 * @LastEditTime: 2021-01-18 21:19:00
 * @Description: taosongs
-->
<template>
  <div>
    <common-line
      content="推荐歌单"
    ></common-line>
    <ul class="singList">
      <li v-for="item of 6" :key="item" class="singList-one">
        <div class="count-container">
          <i class="iconfont icon-count">&#xe600;</i>
          <span class="count">9974.4万</span>
        </div>
        <img src="http://p1.music.126.net/2G7dV10YTqkIiQf9KyEGxw==/109951165004939218.jpg?imageView=1&type=webp&thumbnail=370x0" alt="">
        <p>我這麼差勁怎麼我這麼差勁怎麼會成為別人的遺憾我這麼差勁怎麼會成為別人的遺憾會成為別人的遺憾</p>
      </li>
    </ul>
  </div>
</template>

<script>
import CommonLine from '@/components/CommonLine.vue'
export default {
  components: { CommonLine }
}
</script>

<style lang="scss" scoped>
.singList {
  display: flex;
  flex-wrap: wrap;
  &-one {
    margin-left: 10px;
    margin-bottom: 25px;
    position: relative;
    .count-container {
      position: absolute;
      top: 9px;
      right: 7px;
      color: #fff;
      .icon-count {
        font-size: 24px;
      }
      .count {
        font-size: 22px;
      }
    }
    img {
      width: 243px;;
      height: 243px;;
    }
    p {
      width: 243px;
      font-size: 25px;
      height: 72px;
      line-height: 1.2;
      padding: 13px;
      box-sizing: border-box;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    &:nth-child(1) {
      margin-left: 0;
    }
    &:nth-child(4) {
      margin-left: 0;
    }
  }
}
</style>
